<template lang="html">
  <div class="">
    <div class="">
      <el-button type="primary" @click="addqa">添加问题</el-button>

    </div>
    <tableVue :list="list" :state="false" :pagination="true">
         <slot>
             <el-table-column label="操作" align="center">
                 <template slot-scope="scope">
                     <el-button
                       size="mini"
                       type="danger"
                       class="del"
                       @click="del(scope.row,2)">删除
                     </el-button>
                   </template>
            </el-table-column>
         </slot>
    </tableVue>
        <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
            <slot>
                  <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="标题">
                            <el-input v-model="pageData.title" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item label="问题详情">
                            <el-input
                              v-model="pageData.description"
                              placeholder="请输入内容"
                              type="textarea"
                              :autosize='{minRows: 2, maxRows: 6 }'
                              class="text">
                            </el-input>
                        </el-form-item>
                        <el-form-item class="confirm">
                           <el-button type="primary"  @click="upForm('post')">提交</el-button>
                        </el-form-item>
                  </el-form>
            </slot>
        </dialogVue>
  </div>
</template>

<script>
  import Data from './index.js'
  import tableVue from '@/components/alltable.vue'
  import dialogVue from '@/components/dialog.vue'
  import {
    addqa,
    qaList,
    delqa
  } from "@/api/shoppingCentre/productCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getqaList();
      if (this.$store.state.category.goodsId == '') {
         this.$store.state.category.idx = '2'
         return false
      }
    },
    methods : {
      getqaList () {
        qaList(this.$store.state.category.goodsId).then(res=>{
          if (res.data.code == 'OK') {
            this.list.tbody = res.data.data.records;
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      addqa () {
        this.pageData = {};
        this.dialog = true;
      },
      changeData (data) {
        this.dialog = data;
      },
      upForm () {
        var data = {
          title : this.pageData.title,
          description : this.pageData.description,
          goodsId : this.$store.state.category.goodsId
        }
        addqa(data).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('新增成功');
            this.dialog = false;
            this.getqaList();
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      del (item) {
        let id = []
        id.push(item.mgqId)
        this.delMessage(()=>{
          delqa(id).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
                this.getqaList();
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      },
    }
  }
</script>

<style scoped>
  .confirm {
    position: absolute;
    bottom: -1px;
    right: 100px;
  }
  .el-form {
    width: 331px;
  }
  .text {
    width: 100%;
    /* height: 400px; */
  }
</style>
